import React from 'react'
import PropTypes from 'prop-types';
import { Card, Button, WhiteSpace, Checkbox } from 'antd-mobile'
import { Link } from 'react-router'
import CommonHeader from 'COMPONENT/CommonHeader';
import './index.less'
// ========================================
const Header = Card.Header;
const Body = Card.Body;
const Footer = Card.Footer;
const AgreeItem = Checkbox.AgreeItem;
// const CheckboxItem = Checkbox.CheckboxItem;
// ========================================
class ViewOrder extends React.Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    leftAction = () => {
        this.context.router.push({
            pathname: '/RentQuery'
        })
    }
    constructor(props) {
        super(props);
        this.state = {
            station: ''
        }
    }
    componentWillMount() {
//		var station = localStorage.getItem('state') ;
        this.setState({
            station: localStorage.getItem('viewOrder'),
        })
    }
    render() {
        const { station } = this.state ;
        //  station == '0'
        let order1 = [
            {code: '102231233', date: '2018.07.01-2018.08.01', moneyType: '租金', moneyState: '未支付', money: '332.00'},
            {code: '102231244', date: '2018.07.01-2018.08.01', moneyType: '租金', moneyState: '未支付', money: '432.00'},
            {code: '102231255', date: '2018.07.01-2018.08.01', moneyType: '租金', moneyState: '未支付', money: '532.00'}
        ];
        //  station == '1'
        let order2 = [
            {code: '102231233', date: '2018.07.01-2018.08.01', moneyType: '定金', moneyState: '未支付', money: '332.00'},
            {code: '102231244', date: '2018.07.01-2018.08.01', moneyType: '定金', moneyState: '未支付', money: '432.00'},
            {code: '102231255', date: '2018.07.01-2018.08.01', moneyType: '定金', moneyState: '未支付', money: '532.00'}
        ];
        let order = station == '0' ? order1 : order2;
        return (
            <div id="viewOrder">
                <CommonHeader
                    name='订单查询'
                    leftContentTitle="@back"
                    leftContent="返回"
                    leftAction={this.leftAction}
                />
                <div style={{height: '.9rem'}}></div>
				<p className="viewOrder-title">
                    { station == '1' ? '香江花园一二期 2室一厅' : '大学生人才公寓一期 801室' }
				</p>
				{
					order.map((item) => {
						return (
							<div>
                                <WhiteSpace size="lg" />
                                <div style={{display: 'flex', paddingRight: '10px'}}>
                                    <AgreeItem data-seed="logId" onChange={e => console.log('checkbox', e)}></AgreeItem>
                                    <Card style={{flexGrow: 1}}>
                                        <Header
                                            title={`订单编号：${item.code}`}
											// thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                            extra={<span>¥{item.money}</span>}
                                        />
                                        <Body>
                                        <div>
                                            <div>费用周期：{item.date}</div>
                                            <WhiteSpace size="sm" />
                                            <div>费用类型：{item.moneyType}</div>
                                        </div>
                                        </Body>
                                        <Footer content="" extra={<div>支付状态：{item.moneyState}</div>} />
                                    </Card>
								</div>
                                <WhiteSpace size="lg" />
							</div>
						)
					})
				}
				{
                    station == '0' ? (
                        <div>
                            <WhiteSpace size="lg" />
                            <div className="btnGroup-one">
                                <Button type="primary" className="btnGroup-one-btn">
                                    <Link to='/ViewOrder/Deposit?ctype=sss' >租金支付</Link>
                                </Button>
                            </div>
                        </div>
					) : ''
                }
				{
                    station == '1' ? (
                        <div>
                            <WhiteSpace size="lg" />
                            <div className="btnGroup-one">
                                <Button type="primary" className="btnGroup-one-btn">
                                    <Link to='/ViewOrder/Deposit' >定金支付</Link>
                                </Button>
                                {/*<Button type="primary" className="btnGroup-four-btn">*/}
                                    {/*<Link to='/ViewOrder/Deposit?ctype=sss' >租金支付</Link>*/}
                                {/*</Button>*/}
                                {/*<Button type="primary" className="btnGroup-four-btn">*/}
                                    {/*<Link to='/ViewOrder' >订单撤销</Link>*/}
                                {/*</Button>*/}
                                {/*<Button type="primary" className="btnGroup-four-btn">*/}
                                    {/*<Link to='/ViewOrder/RefundApply' >退款申请</Link>*/}
                                {/*</Button>*/}
                            </div>
						</div>
					) : ''
				}
            </div>
        );
    }
}
// ========================================
export default ViewOrder;